<style scoped>
</style>
<template>
    <div class="page-wrapper">
        <div class="page-wrapper__body is-list">
            <div class="page-container">
                <div class="grid-container">
                    <el-row class="grid-table-tool">
                        <el-col :span="18" class="tool-action">
                            <el-input v-model="params.key"
                                      placeholder="岗位分类/岗位名称"
                                      @keyup.enter="onSearch"
                                      style="width:400px;margin-right:10px;">
                            </el-input>
                            <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>

                        </el-col>
                        <el-col :span="6" class="tool-pagination">
                        </el-col>
                    </el-row>
                    <el-table border class="grid-table" :data="resp.dataList" width="100%">
                        <el-table-column type="index" align="center" width="50"></el-table-column>
                        <el-table-column prop="" label="操作" align="center" width="80">
                            <template slot-scope="scope">
                                <a href="#" title="详情" @click="onDetail(scope.row.id)"><i class="el-icon-search"></i></a>
                                <el-button type="text" size="small" @click="onUpdate(scope.row.id)" style="margin-left: 5px;display: none">修改</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="jobType" label="岗位分类" width="150"></el-table-column>
                        <el-table-column prop="jobName" label="岗位名称" width="150"></el-table-column>
                        <el-table-column prop="jobCategory" label="职位性质" width="150"></el-table-column>
                        <el-table-column prop="dept" label="所属部门" width="120"></el-table-column>
                        <el-table-column prop="workPlace" label="工作地点" width="120" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="salary" label="薪资" width="120"></el-table-column>
                        <el-table-column prop="jobDesc" label="职位说明" width="200" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="requirement" label="岗位要求" width="200" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="applyUrl" label="猎聘链接" :show-overflow-tooltip="true"></el-table-column>
                    </el-table>
                    <el-row class="grid-table-tool">
                        <el-col :span="12" class="tool-action">&nbsp;</el-col>
                        <el-col :span="12" class="tool-pagination">
                            <el-pagination background v-if="resp.total>params.pageSize"
                                           @size-change="handleSizeChange"
                                           @current-change="handleCurrentChange"
                                           :current-page="params.page"
                                           :page-sizes="[10,15, 20, 30, 40]"
                                           :page-size="params.pageSize"
                                           layout="total, sizes, prev, pager, next"
                                           :total="resp.total">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {findList, deleted} from "../../api/job/xiao";
    import moment from 'moment';

    export default {
        data() {
            return {
                resp: {
                    dataList: [],
                    total: 0
                },
                params: {
                    key: '',
                    sort: '',
                    order: '',
                    page: 1,
                    pageSize: 15,
                },
                isLoading: false,
            }
        },
        methods: {
            moment,
            onUpdate(id) {
                this.$router.push('/xiao/job/edit/' + id);
            },
            onDetail(id) {
                this.$router.push('/xiao/job/list/' + id)
            },
            async deleted(id) {
                let resp = await deleted(id);
                if (!this.qUtil.validResp(resp)) {
                    this.$message({type: 'error', message: '删除失败!', showClose: true});
                    return false;
                }
                this.$message({type: 'success', message: '删除成功!', showClose: true});
                if (this.resp.dataList.length === 1 && this.params.page > 1) {
                    this.params.page--;
                }
                this.loadData();

            },
            onSearch() {
                this.params.page = 1;
                this.loadData();
            },
            handleSizeChange(val) {
                this.params.pageSize = val;
                this.onSearch();
            },
            handleCurrentChange(val) {
                this.params.page = val;
                this.loadData();
            },
            async loadData() {
                let resp = await findList(this.params);
                console.log("resp=>", resp)
                if (!this.qUtil.validResp(resp)) {
                    this.$message({type: 'error', message: '数据加载失败!', showClose: true});
                    return false;
                }
                this.resp.dataList = resp.data.dataList;
                this.resp.total = resp.data.total;
            }
        },
        mounted() {
            this.loadData();
        }
    }
</script>